<template>
  <div class="partNewsIndex">
    <Aside></Aside>
    <Header :title="title" @toggleMenu="toggleMenu" @navToBack="navToBack">
    </Header>
    <div class="secetion">
      <div class="partTab">
        <div class="partSchool">
          <!--党校视频列表-->
          <div class="partVideoList" v-if="videoList.length">
            <a  class="videoItem" v-for="(item,index) in videoList" :key="index">
              <router-link :to="{path:'/videoList',query:{class_id:item.id}}" >
                <p class="videoItemTop">
                  <img :src=item.thumb alt="" onerror="this.onerror=null; this.src='../../static/images/codeCover2.jpg'">
                  <span>
                       <img src="http://dangjian.co-links.com/Static/Home/images/videoPlay.jpg" alt="">
                 </span>
                </p>
                <p class="videoItemMiddle">{{item.name}}</p>
                <p class="videoItemBottom">
                  <span>{{item.visit}}</span>
                </p>
              </router-link>
            </a>
          </div>
          <div v-if="!videoList.length" class="noData">
            <p>
              暂无视频
            </p>

          </div>
         <loading  v-if="showLoading" />
        </div>
      </div>
    </div>
  </div>
</template>
<script >
  import aside from '../../components/aside.vue'
  import header from '../../components/header.vue'
  import loading from '../../components/loading.vue'
  export default({
    data (){
      return {
        nomoreData:false,
        loadmoreClick:false,
        title:'微党校',
        videoList:[],
        showLoading:true
      }
    },
    components:{
      Aside:aside,
      Header:header,
      loading:loading
    },
    methods:{

      navToBack(){
        this.$router.go(-1);//返回上一层
      },
      toggleMenu(){
        $('.aside').toggleClass('active')
        $('body').toggleClass('active')
        if($('.aside').hasClass('active')){
          $('#toggleBtn').find('.img2').hide()
          $('#toggleBtn').find('.img1').show()
        }else{
          $('#toggleBtn').find('.img1').hide()
          $('#toggleBtn').find('.img2').show()
        }
      },
      loadMore (){
        this.loadmoreClick =!this.loadmoreClick
      },
      choiseHead(index){
        this.defaultIndex =index
      },
      initData(){
          this.axios.get('/home/School/getClassList?'+`${this.baseUrl}`,{
              params:{
                cate_id:this.$route.query.id,
              }
          }).then((res)=>{
//              console.log(res.data)
            this.showLoading =false
            if(res.data.data.length){
              this.videoList =res.data.data
            }else{
                console.log('暂无数据')
            }


//            console.log(this.videoList)
          })
      }
    },
    mounted (){
      this.initData()
    }
  })
</script>
<style scoped="">

  .noData{
    position: absolute;
    top: 0.8rem;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;

  }
  .noData p{
    position: absolute;
    top: 0rem;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    font-size: 14px;
    color: #333;
    height: 0.8rem;
  }
  .partTab{
    margin-top: 1.2rem;
  }
  .partNewsIndex{
    width: 100%;
    height: 100%;
    background: #f9f5f5;
  }
  .partNews, .partSchool, .onlineExam {
    padding: 0 0.32rem;
  }
  .videoItem{
    display: inline-block;
    width: 3.3rem;
    padding-bottom: 0.3rem;
  }
  .videoItem:nth-child(odd){
    margin-right: 0.1rem;
  }
  .videoItem:nth-child(even){
    margin-left: 0.1rem;
  }
  .videoItem .videoItemTop{
    position: relative;
    height: 2rem;
  }
  .videoItem .videoItemTop>img{
    display: inline-block;
    width: 100%;
    height: 2rem;

  }
  .videoItem .videoItemTop span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0.52rem;
    height: 0.52rem;
  }
  .videoItem .videoItemMiddle {
    font-size: 0.3rem;
    color: #333333;
    margin: 0.15rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: 0.6rem;
    height: 0.9rem;
    line-height: 0.45rem;
  }

  .videoItem .videoItemBottom{
    font-size: 0.26rem;
    color: #999999;
    padding-left: 0.5rem;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .videoItem .videoItemBottom:before{
    position: absolute;
    content: '';
    left: 0;
    top:50%;
    width: 0.36rem;
    height: 0.28rem;
    background-image: url("../../../static/images/eyes.png");
    background-size: 0.36rem 0.28rem;
    background-repeat: no-repeat;
    margin-top: -0.15rem;
  }
</style>
